<template>
  <div>
    <el-row class="row1">
      <el-col :span="8" class="col1">
        <span class="left">空间使用</span>
        <div id="main" style="width: 400px; height: 250px"></div>
      </el-col>
      <el-col :span="8" class="col2" 
        >  <span class="left">空间使用明细</span>
        <div id="main2" style="width: 400px; height: 250px"></div
      ></el-col>
      <el-col :span="8" class="col3">
        <div id="leftNumber">
          人员统计
          <el-progress :percentage="50"> </el-progress>
        </div>
        <div id="fileNumber">
          文件转换数
          <div style="font-size: 50px">29999次</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="13" class="col4">
        <div id="main4" style="width: 1000px; height: 350px"></div>
      </el-col>
      <el-col :span="10" class="col5">
        <el-row class="left">活跃人数排名</el-row>
        <el-row class="elRowHeader"> <el-col :span="4">排名</el-col><el-col :span="12">部门</el-col> <el-col :span="8">人数</el-col></el-row>
        <el-row class="elRow"> <el-col :span="4">01</el-col><el-col :span="12">人力资源部</el-col> <el-col :span="8">323333</el-col> </el-row>
        <el-row class="elRow"> <el-col :span="4">02</el-col><el-col :span="12">人力资源部</el-col> <el-col :span="8">323333</el-col></el-row> 
        <el-row class="elRow"> <el-col :span="4">03</el-col><el-col :span="12">人力资源部</el-col> <el-col :span="8">323333</el-col></el-row>
        <el-row class="elRow2"> <el-col :span="4">04</el-col><el-col :span="12">人力资源部</el-col> <el-col :span="8">323333</el-col> </el-row>
        <el-row class="elRow2"> <el-col :span="4">05</el-col><el-col :span="12">人力资源部</el-col> <el-col :span="8">323333</el-col> </el-row>
      
        <el-row class="elRow2"> <el-col :span="4">06</el-col><el-col :span="12">人力资源部</el-col> <el-col :span="8">323333</el-col> </el-row>
          <el-row class="elRow2"> <el-col :span="4">07</el-col><el-col :span="12">人力资源部</el-col> <el-col :span="8">323333</el-col> </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ContainerIndex",
  mounted() {
    let myChart = echarts.init(document.getElementById("main"));
    let option = {
      legend: {
        orient: "vertical",
        x: "left",
        data: ["已使用", "剩余空间"],
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            emphasis: {
              show: true,
            },
          },
          labelLine: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold",
            },
          },
          data: [
            { value: 29, name: "已使用" },
            { value: 71, name: "剩余空间" },
          ],
        },
      ],
    };
    myChart.setOption(option);
    let myChart4 = echarts.init(document.getElementById("main4"));
    let option4 = {
      xAxis: {
        type: "category",
        data: ["A", "B", "C", "d", "e", "f"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 200, 50, 150],
          type: "line",
        },
      ],
    };
    myChart4.setOption(option4);

    let myChart2 = echarts.init(document.getElementById("main2"));
    let option2 = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    };
    myChart2.setOption(option2);
  },
};
</script>

<style>
.col1,
.col2,
.col3 {
  height: 300px;
}
.col4 {
  height: 400px;
  margin: 0px 40px 0px 0px;
}
.col5 {
  margin: 30px 0px 0px 0px;
}
.row1 {
  margin: 0px 0px 30px 0px;
  height: 250px;
}
#fileNumber {
  margin: 30px 0px 0px 0px;
  background-image: url("../../assets/a.png");
  height: 100px;
}
#leftNumber {
  height: 100px;
}
.elRow {
  background-color: #ebf2ff;
  height: 30px;
  margin: 5px 0px;
}
.elRow2 {
  background-color: #ffffff;
  margin: 5px 0px;
    height: 30px;
}
.elRowHeader {
  background-color: #f5f9fd;
  margin: 5px 0px;
  
}
.left{
  text-align: left;
}
</style>